<template>
  <div class="floor-container w">
    <!-- 家用电器头部导航栏 -->
    <div class="floor-header">
      <h3>家用电器</h3>
      <ul>
        <li><router-link to="">热门</router-link></li>
        <li><router-link to="">大家电</router-link></li>
        <li><router-link to="">生活电器</router-link></li>
        <li><router-link to="">厨房电器</router-link></li>
        <li><router-link to="">应季电器</router-link></li>
        <li><router-link to="">空气/净水</router-link></li>
        <li><router-link to="">高端电器</router-link></li>
      </ul>
    </div>
    <!-- 家用电器商品列表 -->
    <div class="floor-list">
      <!-- 最右边标签栏 -->
      <div class="aside-bar">
        <!-- 导航标签 -->
        <ul class="aside-list">
          <li><router-link to="">节能补贴</router-link></li>
          <li><router-link to="">4k电视</router-link></li>
          <li><router-link to="">空气净化器</router-link></li>
          <li><router-link to="">IH电饭煲</router-link></li>
          <li><router-link to="">滚筒洗衣机</router-link></li>
          <li><router-link to="">电热水器</router-link></li>
        </ul>
        <!-- 图片 -->
        <img src="../../assets/images/home/floor-1-1.png" alt="" />
      </div>
      <!-- 商品轮播图 -->
      <div class="shop-banner">
        <img src="../../assets/images/home/floor-1-b01.png" alt="" />
      </div>
      <!-- 商品1 -->
      <ul class="floor-list-shop1">
        <li><img src="../../assets/images/home/floor-1-2.png" alt="" /></li>
        <li><img src="../../assets/images/home/floor-1-3.png" alt="" /></li>
      </ul>
      <!-- 商品2 -->
      <div class="floor-list-shop2">
        <img src="../../assets/images/home/floor-1-4.png" alt="" />
      </div>
      <!-- 商品3 -->
      <ul class="floor-list-shop1 floor-list-shop3">
        <li><img src="../../assets/images/home/floor-1-5.png" alt="" /></li>
        <li><img src="../../assets/images/home/floor-1-6.png" alt="" /></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Floor'
}
</script>

<style lang="less" scoped>
.floor-container {
  margin-bottom: 30px;
  .floor-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 2px solid #e22519;
    h3 {
      color: #e22519;
    }
    ul {
      display: flex;
      li {
        a {
          padding: 0 8px;
          color: #e22519;
          font-size: 12px;
          border-right: solid 1px #e22519;
        }
        &:last-child {
          a {
            border-right: 0;
          }
        }
      }
    }
  }
  .floor-list {
    display: flex;
    .aside-bar {
      width: 195px;
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: #f7f7f7;
        padding: 15px 0;
        > li {
          text-align: center;
          width: 40%;
          line-height: 28px;
          border-bottom: 1px solid #ccc;
          a {
            color: #333;
            font-size: 12px;
          }
        }
      }
      img {
        width: 100%;
      }
    }
    .shop-banner {
      width: 330px;
      border-top: 0;
      border: 1px solid #ccc;
      img {
        width: 100%;
      }
    }
    .floor-list-shop1 {
      width: 220px;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      li {
        width: 100%;
        height: 180px;
        &:first-child {
          border-bottom: 1px solid #ccc;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .floor-list-shop2 {
      width: 220px;
      border-bottom: 1px solid #ccc;
      img {
        width: 220px;
      }
    }
    .floor-list-shop3 {
      border-right: 0;
      border-left: 1px solid #ccc;
    }
  }
}
</style>
